<template>
  <div class="p-20 target-yield-list-container">
    <section>
      <div >  
        <img src="../../../../assets/images/3.png" alt=""> 
        <div>
          <p>{{ $t('other.todayDate') }}</p>
          <div>{{totalInfo.date}}</div>
        </div>
      </div>
      <div>
        <img src="../../../../assets/images/1.png" alt="">
        <div>
          <p>{{ $t('other.totalTargetProductionForToday') }}</p>
          <div>{{totalInfo.totalProduction}}</div> 
        </div> 
      </div>
      <div>
        <img src="../../../../assets/images/2.png" alt=""> 
        <div>
          <p>{{ $t('other.yesterdayTotalTargetProduction') }}</p>
          <div>{{totalInfo.yesterdayTotalProduction}}</div>
        </div> 
      </div>
    </section>
    <a-table rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :pagination="ipagination" @change="handleTableChange" :scroll="{ y: 'calc(100vh - 400px)'}">
      <template #bodyCell="{ column, record}">
        <template v-if="column.key === 'rule'">
          <span class="table-operate-container">
            {{ record.statisticsType ? record.statisticsType == 1 ? $t('other.accordingToTime') : $t('other.byStyle')  : '' }}
            <a-button type="link" class="primary-link" @click="changeType(record)">{{$t('other.toggle')}}</a-button>
          </span>
        </template>
        <template v-if="column.key === 'status'">
          <span class="table-operate-container">
            <a-switch :checked="!Boolean(record.status)" :disabled="!record.statisticsType" @change="(value) => changeStatus(value, {lineNo: record.lineNo})" />
          </span>
        </template>
        <template v-if="column.key === 'operate'">
          <span class="table-operate-container">
            <a-button type="link" class="primary-link" @click="handleEdit(record)">{{$t('other.disposition')}}</a-button>
          </span>
        </template>
      </template>
    </a-table>
    <OperateDayModal ref="operateDayModalRef" @ok="loadData" /> 
  </div>
</template>

<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { columns } from './config' 
import OperateDayModal from './operateDayModal.vue'
import axios from '@/utils/request'
import { cloneDeep } from 'lodash'
import { message } from 'ant-design-vue'

export default {
  name: 'targetYieldManage',
  mixins: [ListMixinPm],
  components: { 
    OperateDayModal
  },
  data () {
    return {
      url: {
        list: '/api/hanger/plan-production/page-list-production-setting', 
        totals: '/api/hanger/plan-production/get-day-total-production',
        changeStatus: '/api/hanger/plan-production/set-line-status',
        changeType: '/api/hanger/plan-production/set-statistics-type'
      },
      columns,
      totalInfo: {},
      showMore: false,  

    }
  },
  methods: { 
    async getTotals() {
      try {
        const res = await axios.postAction(this.url.totals, {})
        if(res.success) this.totalInfo = res.data || {}
      } catch {
        this.totalInfo = {}
      }
    },
    handleEdit (record) {
      this.$refs.operateDayModalRef.edit(record)
    },
    async changeType(record) {
      try {
        const res = await axios.postAction(this.url.changeType, {
          lineNo: record.lineNo,
          statisticsType: record.statisticsType == 1 ? 2: 1
        })
        if(res.success) {
          console.log(1234)
          this.loadData()
          await this.getTotals()
        }
      } catch {
        this.totalInfo = {}
      }
    },
    async changeStatus (value, record, name) {
      const params = cloneDeep(record)
      params[name ? name : 'status'] = value ? 0 : 1
      const res = await axios.postAction(this.url.changeStatus || this.url.save, params)
      if (res.success) {
        this.loadData()
        await this.getTotals()
      } else {
        message.warning(res.msg || this.$t('common.errorTip'))
      }
    },
  },
  created() {
    this.getTotals()
  }
}
</script>